<!--
    模板文件

    author Yuanao
    date 2021年11月11日19:25:45
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>在线预约</title>

  <!-- css -->
  <link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css">
  <link href="/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
  <link rel="stylesheet" type="text/css" href="/plugins/cubeportfolio/css/cubeportfolio.min.css">
  <link href="/css/nivo-lightbox.css" rel="stylesheet"/>
  <link href="/css/nivo-lightbox-theme/default/default.css" rel="stylesheet" type="text/css"/>
  <link href="/css/owl.carousel.css" rel="stylesheet" media="screen"/>
  <link href="/css/owl.theme.css" rel="stylesheet" media="screen"/>
  <link href="/css/animate.css" rel="stylesheet"/>
  <link href="/css/style.css" rel="stylesheet">

  <!-- boxed bg -->
  <link id="bodybg" href="/bodybg/bg1.css" rel="stylesheet" type="text/css"/>
  <!-- template skin -->
  <link id="t-colors" href="/color/default.css" rel="stylesheet">
  <!--    -->
  <script src="/js/pageWriteHtml.js" charset="UTF-8"></script>
  <style>
    #body {
      margin-top: 200px;
    }
    #search {
      display: flex;
      width: 80%;
      margin: auto;
    }
    #search > input {
      /*width: 80%;*/
    }
    #search > button {
      margin: auto 10px;
    }
    /*没有搜索结果时显示的代码*/
    #info {
      display: flex;
      align-content: center;
      justify-content: center;
      margin: 100px 0;
    }
    #info > div {
      margin: 80px;
    }

    /* 显示表格 */
    .show_row {
      width: 80%;
      margin: 50px auto;
      padding: 20px 0;
    }
    .show_row_item {
      height: 100px;
      background-color: white;
      margin-top: 5px;
      padding: 20px;
      border-radius: 10px;
      display: flex;
    }
    .show_row_item_img_div {
      height: 100px;
      /*padding: 5px;*/
      margin-right: 20px;
    }
  </style>
</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-custom">

<div id="wrapper">

  <!--  将头部信息写入到这里  -->
  <script>writeHtmlAsHead("药品查询");</script>


  <div id="body">
    <div id="search">
      <input type="text" class="form-control" id="drugInput" placeholder="输入药名关键字">
      <button type="submit" class="btn btn-primary" id="searchButton">搜 索</button>
    </div>
    <div id="show">
      <!-- 这是一个魔板文件
      <div class="show_row">
        <div class="show_row_item">
          <div class="show_row_item_img_div">
            <img src="http://p4.qhimg.com/bdr/__85/t012cde4a5058c156b7.jpg" alt="我是图片" height="70px" width="70px">
          </div>
          <div>
            <h6>我是名字</h6>
            <span>河南药业有限责任公司</span>
          </div>
        </div>
      </div>-->
    </div>

  </div>


<!--  将页脚信息写入到这里  -->
<script>writeHtmlAsFooter();</script>


</div>
<a href="#" class="scrollup"><i class="fa fa-angle-up active"></i></a>

<!-- Core JavaScript Files -->
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.easing.min.js"></script>
<script src="/js/wow.min.js"></script>
<script src="/js/jquery.scrollTo.js"></script>
<script src="/js/jquery.appear.js"></script>
<script src="/js/stellar.js"></script>
<script src="/plugins/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<script src="/js/owl.carousel.min.js"></script>
<script src="/js/nivo-lightbox.min.js"></script>
<script src="/js/custom.js"></script>
<script src="/contactform/contactform.js"></script>

<script>

  var $show = $("#show");

  //将infodiv转换为对象,用于替换
  var $info = $('<div id="info"><div><h2>经营理念</h2><p>名医名店名厂名药</p><p>让老百姓吃放心药</p><p>让老百姓吃得起药</p></div><div><h2>文化理念</h2><p>为员工创造机遇</p><p>为社会创造财富</p><p>为人类创造健康</p></div><div><h2>社会承诺</h2><p>让老中医放心</p><p>让老百姓放心</p><p>让老祖宗放心</p></div></div>');

  //初始化首页内容
  $show.html($info);



  /*
  * 搜索按钮的点击事件
  *
  * @author Yuanao
  * @date 2021年11月18日16:56:27
  * */
  $("#searchButton").on("click",() => {

    let searchKey = $("#drugInput").val();
    /*如果没有输入内容即删除*/
    if (searchKey == "") {
      $show.html($info);
      return;
    }

    /*post请求查询数据*/
    $.post("http://localhost:8080/api/drug/findAll",{
      page:1,
      limit:99999,
      name:searchKey
    },(data,status) => {
      if (status === "success" && data.code === 0) {
        let rows = data.data;
        if (rows.length === 0) {
          $show.html($info);
          alert("没有找到相关药品,请尝试别的关键字");
          return;
        }

        //有数据,将得到的数据插入到页面里
        let $showRow = $('<div class="show_row"></div>');
        for (let i = 0; i < rows.length; i++) {
          let obj = rows[i];

          //添加一行数据
          $showRow.append($(`\
            <div class="show_row_item" onclick="details(${obj.id})">
              <div class="show_row_item_img_div">
                <img src="${obj.picture}" alt="${obj.name}" height="70px" width="70px">
              </div>
              <div>
                <h6>${obj.name}</h6>
                <span>${obj.manufacturer}</span>
              </div>
            </div>`
          ));

        }

        $show.html($showRow);
      }
    })
  })

  /*
  * 搜索列表子项的点击事件
  *
  * @author Yuanao
  * @date 2021年11月18日17:25:20
  * */
  function details(id) {
    alert(`跳转到id为 ${id} 的详情页面`);
    ///TODO 跳转详情页面
  }
</script>

</body>

</html>
